<template>
  <div class="app-container">
    <el-form ref="elForm" :model="params" label-width="100px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="仓库名称">
            <el-input v-model="params.key" placeholder="请输入仓库名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item>
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search()">查询</el-button>
            <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="open">添加仓库</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-table :data="stocks" border fit highlight-current-row style="width: 100%;">
      <el-table-column label="id" prop="id" align="center" width="100">
        <template slot-scope="{row}">
          <span>{{row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column label="仓库名称" prop="dictionaryName" align="center">
        <template slot-scope="{row}">
          <span>
            {{row.stockName}}
          </span>
        </template>
      </el-table-column>

      <el-table-column label="地址" prop="clazz" align="center" width="200">
        <template slot-scope="{row}">
          <span>{{row.stockAddr}}</span>
        </template>
      </el-table-column>

      <el-table-column label="启用" prop="available" align="center" width="100">
        <template slot-scope="{row}">
          <span>{{row.available}}</span>
        </template>
      </el-table-column>

      <el-table-column label="备注" prop="clazz" align="center" width="100">
        <template slot-scope="{row}">
          <span>{{row.clazz}}</span>
        </template>
      </el-table-column>

      <el-table-column label="创建人" prop="createBy" align="center" width="100">
        <template slot-scope="{row}">
          <span>{{row.createBy}}</span>
        </template>
      </el-table-column>

      <el-table-column label="修改人" prop="lastUpdateBy" align="center" width="100">
        <template slot-scope="{row}">
          <span>{{row.lastUpdateBy}}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" prop="id" align="center">
        <template slot-scope="{row}">
          <el-button type="primary" @click="checkDict(row)">编辑仓库</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :page-size="params.pageSize"
      layout="prev, pager, next"
      :total="params.totalCount"
      @prev-click="search(-1)"
      @next-click="search(1)"
    ></el-pagination>

    <el-dialog :title="title" :visible.sync="dialogVisible">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-form-item label="仓库名称" prop="stockName">
          <el-input
            v-model="formData.stockName"
            placeholder="请输入仓库名称"
            clearable
            :style="{width: '100%'}"
          ></el-input>
        </el-form-item>
        <el-form-item label="仓库地址" prop="stockAddr">
          <el-input
            v-model="formData.stockAddr"
            placeholder="请输入仓库地址"
            clearable
            :style="{width: '100%'}"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注说明" prop="remark">
          <el-input
            v-model="formData.remark"
            placeholder="请输入备注说明"
            clearable
            :style="{width: '100%'}"
          ></el-input>
        </el-form-item>
        <el-form-item label="启用" prop="available" required>
          <el-switch v-model="formData.available"></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="addSysDict">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {
    getStock,
    editStock,
    addStock,
    delStock
  } from "@/api/store";

  export default {
    name: "stock",

    components: {},
    props: [],
    data() {
      return {
        dialogVisible: false,
        dialogItemVisible: false,
        dialogDictVisible: false,
        title: "新增仓库",
        itemTitle: "添加仓库项",
        stocks: [],
        items: [],
        params: {
          page: 0,
          totalCount: 0,
          totalPage: 1,
          pageSize: 20
        },
        pages: {},
        formData: {
          available: true
        },
        rules: {
          dictionaryName: [
            {
              required: true,
              message: "请输入仓库名称",
              trigger: "blur"
            }
          ],
          remark: [
            {
              required: false,
              message: "请输入备注说明",
              trigger: "blur"
            }
          ]
        },
        itemData: {
          key: "",
          val: "",
          available: true
        },
        itemRules: {
          key: [
            {
              required: true,
              message: "选项名",
              trigger: "blur"
            }
          ],
          val: [
            {
              required: true,
              message: "请输入选项值",
              trigger: "blur"
            }
          ]
        },
        targetDict: {}
      };
    },
    computed: {},
    watch: {},
    created() {
      window.app = this;
      this.search();
    },
    mounted() {},
    filters: {
      formatter(d) {
        return new Date(d).Format("yyyy-MM-dd");
      }
    },
    methods: {
      search(n) {
        if (typeof n === "number") {
          this.params.page = this.params.page + n;
        }
        getStock(this.params).then(response => {
          if (response.code === 200) {
            this.stocks = response.page.list;
            this.params.page = response.page.currPage;
            this.params.totalPage = response.page.totalPage;
            this.params.totalCount = response.page.totalCount;
          }
        });
      },
      addSysDict() {
        this.$refs["elForm"].validate(valid => {
          if (!valid) return;

          if (this.title == "新增仓库") {
            addStock(this.formData).then(response => {
              if (response.code === 200) {
                this.$message({
                  showClose: true,
                  message: response.msg,
                  type: "success"
                });
              }
            });
          } else {
            editStock(this.formData).then(response => {
              if (response.code === 200) {
                this.$message({
                  showClose: true,
                  message: response.msg,
                  type: "success"
                });
              }
            });
          }

          this.params.page = 0;
          this.search();
          this.close();
        });
      },
      open() {
        this.title = "新增仓库";
        this.dialogVisible = true;
      },
      close() {
        this.dialogVisible = false;
      },
      checkDict(d) {
        this.title = "编辑仓库";
        this.dialogVisible = true;
        this.formData = d;
      },
      editDictItem(d) {
        this.itemData = d;
        this.dialogItemVisible = true;
        this.itemTitle = "编辑仓库项";
      }
    }
  };
</script>

<style scoped>
</style>
